<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<html lang="en">
<head>
    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <title>登录</title>

    <style type="text/css">
        #main{
            position: absolute;
            width: 400px;
            height: 300px;
            left:50%;
            top:40%;
            margin-left: -200px;
            margin-top: -100px;
        }
    </style>
</head>

<body>
<div id="main" class="panel panel-primary">
    <div class="panel-heading">
        <div class="panel-title">
            用户注册
        </div>
    </div>
    <div class="panel-body">

        <form action="${pageContext.request.contextPath }/index.jsp" method="post">
            <div class="form-group">
                <label>用户名:</label>
                <input type="text" name="username" id="" class="form-control" placeholder="请输入用户名"/>

            </div>
            <div class="form-group">
                <label>密&nbsp;&nbsp;&nbsp;码:</label>
                <div class="input-group">
                    <input type="password" name="password" id="password" class="form-control"  placeholder="请输入密码"/>
                    <span class="input-group-addon">
						<span class="glyphicon glyphicon-eye-open" id="eye"></span>
					</span>
                </div>
            </div>
            <div class="form-group" style="text-align: center;">
                <input type="submit" value="提交注册" class="btn btn-primary">
                <input type="submit" value="返回" class="btn btn-primary">

            </div>
<script type="text/javascript">
$(function(){
    //当鼠标单击button注册按钮的时候, 触发操作
    $("[type='button']").click(function(){
        //1. 获取input输入框的值
        var username = $("#username").val();

        //2. 进行验证, 输入的值不为null
        if(username != null && username != "") {

            //3. 使用jquery的post方式ajax操作
            $.post("${pageContext.request.contextPath}/registServlet", {
                name: username
            }, function(result){
                //4. 获取服务器返回的回调数据进行处理展示
                if (result == "1") {
                    //该用户可以注册
                    var htmlStr = "<font color='green'>恭喜您可以注册!</font>";
                    $("#sp").html(htmlStr);
                } else {
                    //该用户已经存在
                    var htmlStr = "<font color='red'>不好意思, 该用户已存在!</font>";
                    $("#sp").html(htmlStr);
                }
            });

        }
    });

});
</script>
</body>
</html>
